<template>
  <div class="article-container">
    <van-nav-bar class="page-nav-bar" left-arrow title="文章详情" @click-left="$router.back()"></van-nav-bar>

    <div class="article-detail">
      <!-- 文章标题 -->
      <h1 class="article-title">{{ article.title }}</h1>
      <!-- /文章标题 -->
      <!-- 用户信息 -->
      <van-cell class="user-info" center :border="false">
        <van-image class="avatar" slot="icon" round fit="cover" :src="article.aut_photo" />
        <div slot="title" class="user-name">{{ article.aut_name }}</div>
        <div slot="label" class="publish-date">
          {{ article.pubdate | relativeTime }}
        </div>
        <van-button class="follow-btn" :type="article.is_followed ? 'default' : 'info'" color="#3296fa" round size="small" @click="onFollow" :loading="isFollowLoading" :icon="article.is_followed ? '' : 'plus'">{{ article.is_followed ? "已关注" : "关注" }}</van-button>
      </van-cell>
      <div class="content markdown-body" v-html="article.content" ref="article-content"></div>

      <!-- 评论区列表 -->
      <comment-list :source="articleId" :list="commentLists" @reply-click="onReplyClick"></comment-list>
    </div>

    <!-- 文章底部 -->
    <div class="article-bootom">
      <van-button type="default" round size="small" @click="isPostShow = true">写评论</van-button>
      <van-icon name="comment-o" :badge="totalCount" color="#777" size="30"></van-icon>
      <van-icon @click="onCollect" :name="article.is_collected ? 'star':'star-o'" :color="article.is_collected ?'orange': '#777'" size="30"></van-icon>
      <van-icon @click="onLike" :name="article.attitude === 1 ? 'good-job':'good-job-o'" :color="article.is_followed === 1 ?'red': '#777'" size="30"></van-icon>
      <van-icon name="share" color="#777" size="30"></van-icon>
    </div>

    <!-- 发布评论 -->
    <van-popup v-model="isPostShow" position="bottom">
      <postComment :target="articleId" @post-success="onPostSuccess" />
    </van-popup>

    <!-- 评论回复 -->
    <van-popup v-model="isReplyShow" position="bottom">
      <commentReply v-if="isReplyShow" :comment="setlectCommentReply" @close="isReplyShow = false" :article-id="articleId"></commentReply>
    </van-popup>
  </div>
</template>

<script>
import 'github-markdown-css/github-markdown.css'
import { getArticleById, artCollect, artUnCollect, artLikings, artUnLikings } from '@/api/article.js'
import { addFollow, deleteFollow } from '@/api/user.js'
import { ImagePreview } from 'vant'
import commentList from './components/comment-list.vue'
import postComment from './components/post-comment.vue'
import commentReply from './components/comment-reply.vue'
export default {
  name: 'ArticleIndex',
  components: {
    commentList,
    postComment,
    commentReply
  },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      article: {}, // 文章详情
      isFollowLoading: false,
      isPostShow: false,
      commentLists: [],
      totalCount: 0, // 评论总数
      isReplyShow: false,
      setlectCommentReply: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadArticle()
  },
  mounted () { },
  methods: {
    async loadArticle () {
      try {
        const { data } = await getArticleById(this.articleId)
        this.article = data.data
        // console.log(this.article)
        this.totalCount = data.data.comm_count
        this.$nextTick(() => {
          this.handlePerviewImage()
        })
      } catch (err) {
        console.log(err)
      }
    },
    handlePerviewImage () {
      const articleContent = this.$refs['article-content']
      const imgs = articleContent.querySelectorAll('img')
      const imgPaths = []
      imgs.forEach((item, index) => {
        imgPaths.push(item.src)
        item.onclick = function () {
          ImagePreview({
            images: imgPaths, // 图片数组
            startPosition: index // 图片路径
          })
        }
      })
    },
    async onFollow () {
      this.isFollowLoading = true
      if (this.article.is_followed) {
        await deleteFollow(this.article.aut_id)
      } else {
        await addFollow({ target: this.article.aut_id })
      }

      this.article.is_followed = !this.article.is_followed
      this.isFollowLoading = false
    },
    async onCollect () {
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true
      })
      if (this.article.is_collected) {
        await artCollect(this.articleId)
      } else {
        await artUnCollect(this.articleId)
      }

      this.article.is_collected = !this.article.is_collected
      if (this.articleId.is_collected) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.success('取消收藏')
      }
    },
    async onLike () {
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true
      })
      if (this.article.attitude === 1) {
        await artLikings(this.articleId)
        this.article.attitude = -1
      } else {
        await artUnLikings(this.articleId)
        this.article.attitude = 1
      }
      if (this.articleId.attitude === 1) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
    },
    onPostSuccess (comment) {
      this.commentLists.unshift(comment)
      console.log(this.commentLists, '变化')
      this.isPostShow = false
      this.totalCount++
    },
    onReplyClick (comment) {
      console.log(comment, '评论~~~~~~~~~~~')
      this.setlectCommentReply = comment
      this.isReplyShow = true
    }
  }
}
</script>

<style scoped lang="less">
.article-title {
  font-size: 20px;
  color: #3a3a3a;
  padding: 14px;
  background-color: #fff;
  margin: 0;
}

.user-info {
  .avatar {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name {
    font-size: 12px;
    color: #333333;
  }
  .publish-date {
    font-size: 11px;
    color: #b4b4b4;
  }
  .follow-btn {
    width: 85px;
    height: 29px;
  }
}

.markdown-body {
  padding: 14px;
  background-color: #fff;
}

.article-bootom {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .van-button {
    width: 180px;
  }
}
</style>
